<template>
  <Panel tite="添加账号">
    <AccountForm @success="success"></AccountForm>
    <!-- <el-form
      :model="formDate"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="formDate.account"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          v-model="formDate.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="用户组" prop="userGroup">
        <el-select v-model="formDate.userGroup" placeholder="请选择用户组">
          <el-option label="超级管理员" value="超级管理员"></el-option>
          <el-option label="普通管理员" value="普通管理员"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">立即添加</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form> -->
  </Panel>
</template>

<script>
import { usersAddReq} from "@/api/account.api";

import AccountForm from "./components/AccountForm.vue";
export default {
  components: {
    AccountForm,
  },
  data() {
    return {
      formDate: {
        account: "",
        password: "",
        userGroup: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userGroup: [{ required: true, message: "用户组", trigger: "blur" }],
      },
    };
  },
  methods: {
    // add() {
    //   // 验证
    //   this.$refs.ruleForm.validate(async (res) => {
    //     if (res) {
    //       // console.log('发送axios');
    //       const res = await usersAddReq(this.formDate);
    //       //  console.log(res);
    //       if (res.data.code === 0) {
    //         this.$message.success("添加账号成功");
    //         this.$router.push('/account/list')
    //       }
    //     }
    //   });
    // },

    success(form) {
      console.log(form);
      //   发起请求
       usersAddReq(form).then((res) => {
        if (res.data.code === 0) {
          this.$message.success("添加成功");
          this.$router.push("/account/list");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 300px;
}
</style>